<template>
  <!-- 没图片 -->
  <van-cell
    v-if="type === 0"
    :title="articleInfo.title"
    :label="label"
    @click="todetail"
  />
  <!-- 一张图片 -->
  <van-cell
    v-else-if="type === 1"
    :title="articleInfo.title"
    :label="label"
    class="cell-two"
    @click="todetail"
  >
    <van-image width="100" height="100" :src="articleInfo.cover?.images[0]" />
  </van-cell>
  <!-- 三张图片 -->
  <van-cell
    v-else
    :title="articleInfo.title"
    class="cell-three"
    @click="todetail"
  >
    <template #label>
      <van-image
        width="100"
        height="100"
        v-for="(item, index) in articleInfo.cover?.images"
        :key="index"
        :src="item"
      />
      <span>{{ label }}</span>
    </template>
  </van-cell>
</template>

<script>
import dayjs from '@/utils/dayjs'
export default {
  name: '',
  components: {},
  props: {
    articleInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {}
  },
  computed: {
    type() {
      return this.articleInfo.cover?.type
    },
    label() {
      const { pubdate, aut_name, comm_count } = this.articleInfo
      return `${aut_name} ${comm_count}评论 ${dayjs(pubdate).fromNow()}`
    }
  },
  watch: {},
  created() {},
  methods: {
    todetail() {
      this.$router.push({
        path: '/detail',
        query: {
          articleId: this.articleInfo.art_id
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.cell-two {
  .van-image {
    width: 4rem !important;
  }
}
.cell-three {
  .van-image {
    width: 2.8rem !important;
    margin: 0.1rem;
  }
}
</style>
